<template>
  <div class="full">
    <vue3-tree-org :data="data" center horizontal collapsable :label-style="style" node-draggable="false" scalable
      :only-one-node="onlyOneNode" disabled default-expand-level="3" :clone-node-drag="cloneNodeDrag"
      @on-contextmenu="onMenus" @on-node-click="onNodeClick">
      <!-- 自定义节点内容 -->
      <template v-slot="{ node }">
        <div class="tree-org-node__text node-label">
          <div class="custom-content">牛编号：{{ '000' + node.id }}</div>
          <div>{{ node.label }}</div>
        </div>
      </template>
      <!-- 自定义展开按钮 -->
      <template v-slot:expand="{ node }">
        <div>{{ node.children.length }}</div>
      </template>
    </vue3-tree-org>

    <el-dialog v-model="showDialog" title="牲畜基本信息" width="600">
      <div class="full box_bgc fs_20">
        <div>牛编号 0002</div>
        <div class="w_full h_full-30 color_000">
          <div class="w_full flex_row_between mb_10 ml_30 mt_10">
            <div class="w_50_p">性别： 公</div>
            <div class="w_50_p">体重： 378 KG</div>
          </div>
          <div class="w_full flex_row_between mb_10 ml_30 mt_10">
            <div class="w_50_p">品种: 西门塔尔牛</div>
            <div class="w_50_p">毛色：红白花</div>
          </div>

          <div class="w_full flex_row_between mb_10 ml_30 mt_10">
            <div class="w_50_p">出生日期: 2021-03-15</div>
            <div class="w_50_p">月龄: 12月</div>
          </div>

          <div class="w_full flex_row_between mb_10 ml_30 mt_10">
            <div class="w_50_p">是否有角: 是</div>
            <div class="w_50_p">免疫疫苗: 口蹄疫，疯牛疫</div>
          </div>

          <div class="w_full flex_row_between mb_10 ml_30 mt_10">
            <div class="w_50_p">育种次数: 2 </div>
            <div class="w_50_p">防疫次数: 2</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
  name: "PedigreeTree",
  data() {
    return {
      showDialog: false,
      data: {
        "id": 1, "label": "当前牛",
        "style": { "width": "120px", "color": "#000", "background": "#fff" },
        "children": [
          {
            "id": 2, "pid": 1, "label": "父",
            "style": { "width": "120px", "color": "#fff", "background": "#108ffe" },
            "children": [
              {
                "id": 4, "pid": 2, "label": "父",
                "style": { "width": "120px", "color": "#fff", "background": "#108ffe" }
              },
              {
                "id": 5, "pid": 2, "label": "母",
                "style": { "width": "120px", "color": "#fff", "background": "rgb(249, 153, 153)" }
              }
            ]
          },
          {
            "id": 3, "pid": 1, "label": "母",
            "style": { "width": "120px", "color": "#fff", "background": "rgb(249, 153, 153)" },
            "children": [
              {
                "id": 6, "pid": 3, "label": "父",
                "style": { "width": "120px", "color": "#fff", "background": "#108ffe" }
              },
              {
                "id": 7, "pid": 3, "label": "母",
                "style": { "width": "120px", "color": "#fff", "background": "rgb(249, 153, 153)" }
              }
            ]
          },
        ]
      },
      horizontal: true,
      collapsable: true,
      onlyOneNode: true,
      cloneNodeDrag: true,
      expandAll: true,
      style: {
        width: "100%",
        height: "100%",
        background: "#fff",
        color: "#5e6d82",
      },
    };
  },
  methods: {
    onMenus({ node, command }) {
      // console.log(node, command);
    },
    onNodeClick(e, data) {
      // console.log('点击节点 : ', data);

      this.showDialog = true
    },
    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },
  },
};
</script>

<style scoped>
.zm-tree-org {
  background: none !important;
}

.tree-org-node__text {
  text-align: left;
  font-size: 14px;
}

.custom-content {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid currentColor;
}

.s {
  color: rgb(249, 153, 153);
}
</style>
